<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %> 
<!DOCTYPE html>
<html>
<head>
<style>
@font-face
{
	font-family:myFont;
	src:url(/kosta_project_final_taxi/fonts/korean/훈새마을운동R.ttf);
}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCEj5KDUiTWEGXQFnwTFUx5t-iFISVDSHM&sensor=false&region=KR">
</script>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<script type="text/javascript">
(function() {
	  var po = document.createElement('script'); 
	  po.type = 'text/javascript'; po.async = true;
	  po.src = 'https://apis.google.com/js/client:plusone.js';
	  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no"/>
<title><tiles:getAsString name="title"/></title>
<script type="text/javascript">
var mainCss=function(){};
$(document).ready(function(){
	$("body").css({
		"min-width":"400px"
	});
	$(window).resize(function(){
		documentCss();
		if(!$(mainCss).isEmptyObject){
			mainCss();
		}
	});
	$("#top").css({
		"border-right":"3px solid #b1aea6",
		"border-bottom":"3px solid #b1aea6"
	});
	$("table").css({
		"margin":"0 auto",
		"font-size":"16px"
	});
	$("th").css({
		"font-family":"myFont",
		"text-align":"center",
		"border": "2px solid white",
		"padding": "10px"
	});
	$("td").css({
		"font-family":"myFont",
		"text-align":"center",
		"border": "2px solid white",
		"padding": "10px",
		"min-width":"500px"
	});
	$("#loginTable").css({
		"display":"none",
		"background-color":"white",
		"position":"absolute",
		"top":$("#logIn").position().top+60,
		"left":0,
		"width":"345px",
		"font-family":"myFont",
		"font-size":"12pt",
		"color":"#C6C6B2",
		"padding":"10px",
		"border":"3px solid #b1aea6"
	});
	$("#loginTable tr").css({
		"padding":"10px"
	});
	$("#loginTable td").css({
		"padding":"5px",
		"min-width":"0"
	});
	$("div.login").css({
		"display":"inline-block"
	});
	$("input.login").css({
		"width":"80px"
	});
	$("input.join").css({
		"width":"80px"
	});
	$("#joinMessage").css({
		"display":"none",
		"background-color":"white",
		"text-align":"center",
		"position":"absolute",
		"top":$("#logIn").position().top+95,
		"left":-3,
		"width":"345px",
		"font-family":"myFont",
		"font-size":"12pt",
		"color":"#C6C6B2",
		"padding":"10px",
		"border":"3px solid #b1aea6"
	});
	$("input.join").click(function(){
		if($("input.phone").val().trim() != "" && $("input.password").val().trim() != ""){
			join();	
		}
	});
	$("input.login").click(function(){
		if($("input.phone").val().trim() != "" && $("input.password").val().trim() != ""){
			login();	
		}
	});
	$("form").submit(function(){
		return false;
	});
	documentCss();
});
function documentCss(){
	$("div.info").css({
		"min-width":$(window).width(),
		"min-height" : $(window).height() * 0.5 / 10,
		"padding-top":"10px",
		"color":"white",
		"text-align":"center",
		"font-family":"myFont"
	});
	$("div.container").css({
		"min-width":$(window).width(),
		"min-height" : $(window).height() * 80 / 100,
		"margin-top":"60px",
		"color":"white",
		"text-align":"center"
	});
}

function login(){
	var isNumber = false;
	if($("input.phone").val().length == 11){
		var number = [0,1,2,3,4,5,6,7,8,9,10];
		var areaCode = "010";
		if($("input.phone").val().indexOf(areaCode) != 0){
			isNumber = false;
		}
		for(var i = 0; i < $("input.phone").val().length; i++){
			if(number.indexOf($("input.phone").val().charAt(i)) == -1){
				isNumber = false;
			}
			if(isNumber == false){
				break;
			}
		}
	}
	if(isNumber == false){
		$("input.phone").attr("name","memberId"); 
	}
	$.getJSON("/kosta_project_final_taxi/login.do",$("input.phone").attr("name")+"="+$("input.phone").val()+"&password="+$("input.password").val(), function(data){
		if(data.result.indexOf("성공") != -1){
			location.reload();
		}else{
			$("#joinMessage").text(data.result);
			$("#joinMessage").css({
				"display":"block"
			});
			setTimeout(function(){
				$("#joinMessage").css({
					"display":"none"
				});
			},3000);	
		}
	});
	return false;
}

function join(){
	$.getJSON("/kosta_project_final_taxi/member.do","phone="+$("input.phone").val()+"&password="+$("input.password").val(), function(data){
		$("#joinMessage").text(data.result);
		$("#joinMessage").css({
			"display":"block"
		});
		setTimeout(function(){
			$("#joinMessage").css({
				"display":"none"
			});
			if(data.result.indexOf("축하") != -1){
				location.reload();
			}
		},3000);
	});
	return false;
}
</script>
</head>
<body>
		<div class="container">
			<div id="top" >
				<ul id="gn-menu" class="gn-menu-main">
					<tiles:insertAttribute name="top"/>
					<tiles:insertAttribute name="header"/>
				</ul>		
			</div>
			<tiles:insertAttribute name="main"/>
		</div><!-- /container -->
		<div id="loginTable">
				<form method="post">
					<table>
						<tr>
							<td>전화번호</td>
							<td><input class="phone" type="text" name="phone" size="20" maxlength="11" required></td>
							<td><input class="login" type="submit" value="로그인" required></td>
						</tr>
						<tr>
							<td>패스워드</td>
							<td><input class="password" type="password" name="password" size="20" maxlength="10" required></td>
							<td><input class="join" type="submit" value="회원가입"></td>
						</tr>
					</table>
				</form>
				<div id="joinMessage">하이</div>
		</div>
		<div id="footer" >
			<tiles:insertAttribute name="footer"/>
		</div>
		<script src="js/classie.js"></script>
		<script src="js/gnmenu.js"></script>
		<script>
			new gnMenu( document.getElementById( 'gn-menu' ) );
		</script>
</body>
</html>